<template>
  <div v-if="cinemaFilmList && cinemaFilmList.length > 0" class="cinema-film-list">
    <!-- 设置动态模糊背景 根据轮播图滑动切换背景 -->
    <div class="cinema-film-swiper">
      <div class="film-swiper-background-image" :style="{ 'background-image': `url(${computedFilmInfo.poster})` }">
      </div>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="item in cinemaFilmList" :key="item.filmId">
          <router-link :to="`/cinema/${cinemaId}/film/${item.filmId}/`" replace>
            <img :src="item.poster" :alt="item.name" />
          </router-link>
        </swiper-slide>
      </swiper>
    </div>
    <!-- 电影详细信息展示区域 -->
    <div class="cinema-film-info" style="z-index: 10;" v-if="computedFilmInfo"
         @click="$router.push(`/film/${computedFilmInfo.filmId}`)">
      <div class="film-title">
        <div class="film-name">{{ computedFilmInfo.name }}</div>
        <div class="film-grade" v-if="computedFilmInfo.grade">
          {{ computedFilmInfo.grade }}<span>分</span>
        </div>
      </div>
      <div class="film-more-icon">
        <i class="iconfont icon-you"></i>
      </div>
      <div class="film-desc">
        {{ computedFilmDesc }}
      </div>
    </div>
    <!-- TODO 电影购票信息区域 -->
    <van-empty image-size="100" image="search" description="版权问题，暂不展示购票详情信息" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.min.css'
import { Tab, Tabs, Empty } from 'vant'
import { http, getTimestamp } from '@/utils'

export default {
  name: 'CinemaFilmList',
  props: ['cinemaId', 'filmId', 'showDate'],
  components: {
    Swiper,
    SwiperSlide,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Empty.name]: Empty
  },
  data () {
    const vm = this // 保存 this 指针
    return {
      swiperObj: null, // Swiper实例对象
      isShowFixed: false, // 是否展示fixed占位元素
      activeIndex: 0, // 当前激活轮播图的索引
      cinemaFilmList: [], // 电影列表信息
      // 轮播图配置
      swiperOption: {
        effect: 'coverflow',
        grabCursor: true,
        slideToClickedSlide: true,
        centeredSlides: true,
        speed: 500,
        slidesPerView: 'auto',
        spaceBetween: 20,
        coverflowEffect: {
          rotate: 15,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true
        },
        on: {
          // 点击轮播图时回调
          slideChangeTransitionStart: function () {
            vm.activeIndex = this.activeIndex
          },
          // 轮播图滑动释放后回调
          transitionEnd () {
            // 由于vm.activeIndex不是同步更新，这里做判断，防止点击和滑动重复触发事件
            if (vm.activeIndex !== this.realIndex) {
              vm.activeIndex = this.activeIndex
            }
          },
          // 轮播图初始化完成回调
          init () {
            vm.swiperObj = this // 保存 Swiper 实例到 swiperObj
            const arr = vm.cinemaFilmList.map((film) => film.filmId) // 获取电影列表 filmId 数组
            const index = arr.indexOf(parseInt(vm.filmId)) // 查找要滑动到的图片的索引值
            this.slideTo(index < 0 ? 0 : index) // 滑动到对应的电影图片
          }
        }
      }
    }
  },
  computed: {
    ...mapState('CityModule', ['cityId']),
    // 返回当前查看的电影
    computedFilmInfo () {
      if (this.cinemaFilmList.length === 0) return null
      return this.cinemaFilmList[this.activeIndex]
    },
    // 返回电影描述文字
    computedFilmDesc () {
      return `${this.computedFilmInfo.category} | ${
        this.computedFilmInfo.runtime ? this.computedFilmInfo.runtime : '--'
      }分钟 | ${this.computedFilmInfo.director ? this.computedFilmInfo.director : ' '} | ${this.computedFilmInfo.actors
        .map((item) => item.name)
        .join(' ')}`
    }
  },
  mounted () {
    http({
      url: `/gateway/?cinemaId=${this.cinemaId}&k=${getTimestamp()}`,
      headers: { 'X-Host': 'mall.film-ticket.film.cinema-show-film' }
    })
      .then((res) => {
        this.cinemaFilmList = Object.freeze(res.data.data.films)
      })
      .catch((err) => {
        console.warn(err)
        this.cinemaFilmList = []
      })
  },
  watch: {
    // 监听 filmId 变化，以便在地址栏手动输入 filmId 时动态切换轮播图图片
    filmId (newValue) {
      const arr = this.cinemaFilmList.map((film) => film.filmId) // 获取电影列表 filmId 数组
      const index = arr.indexOf(parseInt(newValue)) // 查找要滑动到的图片的索引值
      this.swiperObj.slideTo(index < 0 ? 0 : index) // 滑动到对应的电影图片
    }
  }
}
</script>

<style lang="scss" scoped>
.cinema-film-list {
  border-bottom: 1px solid #f4f4f4;
  .cinema-film-swiper {
    /* 设置动态模糊背景 */
    .film-swiper-background-image {
      width: 100vw;
      height: 160px;
      position: absolute;
      background-size: cover;
      background-position: center;
      filter: blur(25px);
    }
    height: 160px;
    padding: 15px 0px;
    position: relative;
    overflow: hidden;
    .swiper {
      .swiper-slide {
        width: 90px;
        height: 130px;
        img {
          width: 90px;
          height: 130px;
          cursor: pointer;
        }
      }
    }
  }
  .cinema-film-info {
    /* 利用伪类实现三角形 */
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: -20px;
      border: 10px solid transparent;
      border-bottom: 10px solid white;
    }
    height: 80px;
    padding: 15px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    position: sticky;
    background-color: white;
    top: 44px;
    cursor: pointer;
    .film-title {
      display: flex;
      .film-name {
        color: #191a1b;
        font-size: 15px;
      }
      .film-grade {
        font-size: 16px;
        font-style: italic;
        color: #ffb232;
        margin-left: 5px;
        span {
          font-size: 12px;
        }
      }
    }
    .film-more-icon {
      position: absolute;
      height: 12px;
      line-height: 12px;
      right: 10px;
      top: 32px;
      transform: scale(0.8);
      i {
        font-size: 12px;
      }
    }
    .film-desc {
      max-width: 80vw;
      color: #797d82;
      font-size: 13px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>
